<template>
  <div class="imagePoi-panel">
    <div class="panel-title">图片Poi属性</div>
    <el-form label-position="left" label-width="80px" size="small">
      <el-form-item label="屏幕渲染">
        <el-switch v-model="properties.screenRender" active-color="#00c3ff" />
      </el-form-item>

      <el-form-item label="尺寸自适应">
        <el-switch v-model="properties.sizeByContent" active-color="#00c3ff" />
      </el-form-item>

      <el-form-item label="尺寸大小">
        <div class="input-group">
          <el-input-number
            v-model="properties.size[0]"
            :disabled="properties.sizeByContent"
            :min="1"
            :max="1000"
            :controls="false"
            class="half-width"
          />
          <el-input-number
            v-model="properties.size[1]"
            :disabled="properties.sizeByContent"
            :min="1"
            :max="1000"
            :controls="false"
            class="half-width"
          />
        </div>
      </el-form-item>

      <el-form-item label="偏移比例">
        <div class="input-group">
          <el-input-number
            v-model="properties.anchor[0]"
            :min="0"
            :max="2"
            :step="0.1"
            :precision="1"
            :controls="false"
            class="half-width"
          />
          <el-input-number
            v-model="properties.anchor[1]"
            :min="0"
            :max="2"
            :step="0.1"
            :precision="1"
            :controls="false"
            class="half-width"
          />
        </div>
      </el-form-item>

      <el-form-item label="图片路径">
        <el-input
          v-model="properties.url"
          placeholder="请输入自定义图片路径"
          clearable
          @input="handleUrlChange"
        />
      </el-form-item>

      <el-form-item label="内置图片">
        <el-select
          v-model="properties.builtInImage"
          placeholder="正在使用自定义图片路径"
          class="full-width"
          :disabled="!!properties.url"
          @change="handleBuiltInImageChange"
        >
          <el-option
            v-for="item in imagePoiOptions"
            :key="item.id"
            :label="item.name"
            :value="item.url"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="渲染模式">
        <el-select v-model="properties.renderMode" placeholder="请选择渲染模式" class="full-width">
          <el-option
            v-for="item in imagePoiRenderMode"
            :key="item.id"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="旋转类型">
        <el-select
          v-model="properties.rotationType"
          placeholder="请选择旋转类型"
          class="full-width"
        >
          <el-option
            v-for="item in imagePoiRotationType"
            :key="item.id"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>

    <div class="button-create">
      <el-button type="primary"  @click="createESImageLabel">开始创建</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ESImageLabel } from 'earthsdk3'
import { getobjm } from '@/utils/getobjm.js'
import { usePlottingStore } from '@/stores/plottingStore.js'
import { useTreeStore } from '@/stores/treeStore.js'
const plottingStore = usePlottingStore()
const treeStore = useTreeStore()
const objm = getobjm()
const properties = ref({
  screenRender: true, //屏幕渲染
  sizeByContent: true, //尺寸自适应
  size: [100, 100],
  anchor: [0.5, 1], //偏移比例
  url: '',
  builtInImage: 'inner://CameraBlue.png',
  renderMode: 0,
  rotationType: 1,
})

// 处理URL变化
const handleUrlChange = (value) => {
  if (value) {
    // 如果URL被设置，可以取消内置图片选择
    properties.value.builtInImage = ''
  }
  // 如果清空了URL，可以重新启用内置图片选择
  if (!value && !properties.value.builtInImage) {
    // 如果URL被清空且没有选择内置图片，可以设置默认内置图片
    properties.value.builtInImage = 'inner://CameraBlue.png'
  }
}

// 处理内置图片变化
const handleBuiltInImageChange = (value) => {
  // 当选择内置图片时，确保URL为空
  if (value) {
    properties.value.url = ''
  }
}

//内置图片 图片POI选项
const imagePoiOptions = [
  {
    id: '1',
    name: '蓝色相机',
    url: 'inner://CameraBlue.png',
  },
  {
    id: '2',
    name: '绿色相机',
    url: 'inner://CameraGreen.png',
  },
  {
    id: '3',
    name: '蓝色车辆',
    url: 'inner://CarBlue.png',
  },
  {
    id: '4',
    name: '红色车辆',
    url: 'inner://CarRed.png',
  },
  {
    id: '5',
    name: '渡口',
    url: 'inner://Dukou.png',
  },
  {
    id: '6',
    name: '界限',
    url: 'inner://Jiexian.png',
  },
  {
    id: '7',
    name: '警示',
    url: 'inner://Jingshi.png',
  },
  {
    id: '8',
    name: '蓝色料斗',
    url: 'inner://LiaodouBlue.png',
  },
  {
    id: '9',
    name: '红色料斗',
    url: 'inner://LiaodouRed.png',
  },

  {
    id: '10',
    name: '龙门吊蓝色',
    url: 'inner://LongmendiaoBlue.png',
  },
  {
    id: '11',
    name: '龙门吊红色',
    url: 'inner://LongmendiaoRed.png',
  },
  {
    id: '12',
    name: '锚',
    url: 'inner://Mao.png',
  },
  {
    id: '13',
    name: '蓝色门机',
    url: 'inner://MenjiBlue.png',
  },
  {
    id: '14',
    name: '红色门机',
    url: 'inner://MenjiRed.png',
  },
  {
    id: '15',
    name: '蓝色人员',
    url: 'inner://RenyuanBlue.png',
  },
  {
    id: '16',
    name: '红色人员',
    url: 'inner://RenyuanRed.png',
  },
  {
    id: '17',
    name: '蓝色圆形人员',
    url: 'inner://RenyuanCircleBlue.png',
  },
  {
    id: '18',
    name: '红色圆形人员',
    url: 'inner://RenyuanCircleRed.png',
  },
]
//渲染模式
const imagePoiRenderMode = [
  {
    id: '0',
    name: '单面不透明',
    value: 0,
  },
  {
    id: '1',
    name: '双面不透明',
    value: 1,
  },
  {
    id: '2',
    name: '单面遮罩',
    value: 2,
  },
  {
    id: '3',
    name: '双面遮罩',
    value: 3,
  },
  {
    id: '4',
    name: '单面透明',
    value: 4,
  },
  {
    id: '5',
    name: '双面透明',
    value: 5,
  },
  {
    id: '6',
    name: '单面未遮挡透明',
    value: 6,
  },
  {
    id: '7',
    name: '双面未遮挡透明',
    value: 7,
  },
]
//旋转类型
const imagePoiRotationType = [
  {
    id: '0',
    name: '固定模式',
    value: 0,
  },
  {
    id: '1',
    name: '面向屏幕旋转',
    value: 1,
  },
  {
    id: '2',
    name: '绕自身Z轴旋转',
    value: 2,
  },
]

// 定义emit，用于通知父组件关闭配置面板
const emit = defineEmits(['close-panel'])
const createESImageLabel = () => {
  const sceneObjectESImageLabel = objm.createSceneObject(ESImageLabel)
  if (!sceneObjectESImageLabel) return
  sceneObjectESImageLabel.screenRender = properties.value.screenRender
  sceneObjectESImageLabel.sizeByContent = properties.value.sizeByContent
  sceneObjectESImageLabel.size = properties.value.size
  sceneObjectESImageLabel.anchor = properties.value.anchor
  sceneObjectESImageLabel.renderMode = properties.value.renderMode
  sceneObjectESImageLabel.rotationType = properties.value.rotationType
  sceneObjectESImageLabel.url = properties.value.url
    ? properties.value.url
    : properties.value.builtInImage
  // 监听widgetEvent事件   图片对象被拾取事件
  sceneObjectESImageLabel.allowPicking = true //允许被拾取
  sceneObjectESImageLabel.editing = true

  sceneObjectESImageLabel.editingChanged.disposableWeakOn(() => {
    if (sceneObjectESImageLabel && sceneObjectESImageLabel.editing === false) {
      const position = sceneObjectESImageLabel.position
      const a = position[0] === 0 && position[1] === 0
      const json = sceneObjectESImageLabel.json
      objm.destroySceneObject(sceneObjectESImageLabel)
      setTimeout(() => {
        if (!a) {
          const addTree = treeStore.createSceneObjectTreeItemFromJson(json)
          plottingStore.createPlottingData.push(addTree)
          if (addTree) treeStore.treeChange()
        }
      }, 300)
    }
  })

  emit('close-panel') //关闭配置面板
}
</script>

<style lang="scss" scoped>
.imagePoi-panel {
  width: 14.5833vw /* 280px -> 14.5833vw */;
  color: #ffffff;
  background-color: rgba(0, 8, 26, 0.8);
  border-radius: 0.4167vw /* 8px -> .4167vw */;
  box-shadow: 0 0 0.5208vw /* 10px -> .5208vw */ rgba(0, 195, 255, 0.5);
  border: 0.0521vw /* 1px -> .0521vw */ solid rgba(0, 195, 255, 0.6);
  padding: 0.5208vw /* 10px -> .5208vw */;
  .panel-title {
    font-size: 0.7292vw /* 14px -> .7292vw */;
    color: #00c3ff;
    font-weight: bold;
    padding-bottom: 0.5208vw /* 10px -> .5208vw */;
    border-bottom: 0.0521vw /* 1px -> .0521vw */ solid rgba(0, 195, 255, 0.3);
  }

  .button-create {
    margin-top: 15px;
    :deep(.el-button) {
      width: 100%;
      background-color: rgba(0, 195, 255, 0.2);
      border: 0.0521vw /* 1px -> .0521vw */ solid rgba(0, 195, 255, 0.6);
      color: #00c3ff;
      border-radius: 0.2083vw /* 4px -> .2083vw */;
      font-size: 0.625vw /* 12px -> .625vw */;
      height: 1.6667vw /* 32px -> 1.6667vw */;
      line-height: 1.6667vw /* 32px -> 1.6667vw */;
      margin: 0;
      &:hover {
        background-color: rgba(0, 195, 255, 0.4);
      }
    }
  }
}

:deep(.el-form-item__label) {
  color: #ffffff;
  font-size: 12px;
}

.input-group {
  display: flex;
  gap: 8px;
}

.half-width {
  width: calc(50% - 4px);
}

.full-width {
  width: 100%;
}

:deep(.el-input__wrapper),
:deep(.el-input-number__wrapper),
:deep(.el-select .el-input__wrapper) {
  background-color: rgba(0, 8, 26, 0.6);
  border: 1px solid rgba(0, 195, 255, 0.4);
  box-shadow: none;
}

:deep(.el-input__inner) {
  color: #ffffff;
  height: 28px;
}

:deep(.el-select-dropdown) {
  background-color: rgba(0, 8, 26, 0.9);
  border: 1px solid rgba(0, 195, 255, 0.4);
}

:deep(.el-select-dropdown__item) {
  color: #ffffff;
}

:deep(.el-select-dropdown__item.selected) {
  color: #00c3ff;
  background-color: rgba(0, 195, 255, 0.2);
}

:deep(.el-select-dropdown__item:hover) {
  background-color: rgba(0, 195, 255, 0.1);
}

:deep(.el-switch__core) {
  background-color: rgba(0, 8, 26, 0.6);
  border-color: rgba(0, 195, 255, 0.4);
}

:deep(.el-switch.is-checked .el-switch__core) {
  background-color: #00c3ff;
  border-color: #00c3ff;
}

:deep(.el-form-item) {
  margin-bottom: 12px;
}

:deep(.el-input__clear) {
  color: rgba(255, 255, 255, 0.7);
  &:hover {
    color: #ffffff;
  }
}
</style>
